  <template>
    <div>
      <el-table :data="goodsList" style="width: 100%">
        <el-table-column type="expand">
          <template v-slot="{row}">
            <el-row>
              <el-col :span="6"><span class="goodsText">商品 ID</span>{{row.id}}</el-col>
              <el-col :span="6" :offset="9"><span class="goodsText">商品名称</span>{{row.id}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="goodsText">所属分类</span>{{row.category}}</el-col>
              <el-col :span="6" :offset="9"><span class="goodsText">商品价格</span>{{row.price}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="goodsText">商品图片</span>{{row.imgUrl}}</el-col>
              <el-col :span="6" :offset="9"><span class="goodsText">创建时间</span>{{row.ctime}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="goodsText">商品评价</span>{{row.rating}}</el-col>
              <el-col :span="6" :offset="9"><span class="goodsText">商品销量</span>{{row.sellCount}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="goodsText">商品描述</span>{{row.goodsDesc}}</el-col>
            </el-row>
            </template>
        </el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="所属分类" prop="category"></el-table-column>
      <el-table-column label="商品价格" prop="price"></el-table-column>
      <el-table-column label="商品图片" prop="imgUrl">
        <template v-slot="{row}">
            <el-image style="width:80px" :src="`http://localhost:5000/upload/imgs/goods_img/${row.imgUrl}`"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button type="primary" @click="edit(row)">编辑</el-button>
          <el-button type="danger" @click="sync_del_good(row.id)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>
  </template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("goods", ["goodsList", "dialogVisible"])
  },
  methods: {
    ...mapMutations("goods", ["update_dialogVisible", "update_edit"]),
    ...mapActions("goods", ["sync_update_goodsList", "sync_del_good"]),

    edit(data) {
      this.update_dialogVisible(true);
      this.update_edit(data);
    },
  
  },
  created() {
    this.sync_update_goodsList();
  }
};
</script>

<style scoped>
.goodsText {
  margin-right: 10px;
}
</style>